<template>
  <div class="w1300">
    <div style="margin-left: 20px; margin-bottom: 20px">
      <el-button type="primary" link>添加</el-button>
      <el-button type="danger" link>删除</el-button>
    </div>
    <form-comp
      v-model:formData="formData"
      :form-item="formItem"
      labelWidth="70"
      size="large"
      :button="button"
      btnAlign="right"
    ></form-comp>
  </div>
</template>

<script setup lang="ts">
import FormComp from '@/components/form/form.vue'
import { reactive, ref } from 'vue'
import { FormButtonType, FormItemType } from '@/components/form/type'
import { useRouter } from 'vue-router'

const router = useRouter()

const isEnroll = ref(false)
const formItem = ref<FormItemType[]>([
  { type: 'input', label: '标题', prop: 'title' },
  { type: 'textarea', label: '简介', prop: 'introduce' },
])
const formData = reactive({
  title: '',
  introduce: '',
})

const button = reactive<FormButtonType[]>([
  {
    key: 'submit',
    type: 'primary',
    label: '确定',
    callback: () => onSubmit(),
  },
])

const onSubmit = () => {
  alert('确定')
}
</script>

<style scoped lang="scss">
.w1300 {
  padding: 50px 0;
}
</style>
